CSS3基础知识学习笔记

共计 7839 个字符，预计需要花费 20 分钟才能阅读完成。

字体

字体族

font-family: Microsoft YaHei, Heiti SC, sans-serif;

font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体族（Sans-Serif）。

通用字体族：

• Serif 衬线体
• Sans-Serif 无衬线体
• Cursive 手写体
• Fantasy 夸张体
• Monospace 等宽字体

使用 Web Fonts：

@font-face {
  font-family: 'CustomFont';
  src: url(https://example.com/CustomFont.woff2) format('woff2');
}

font 复合属性

复合属性连写的 font 格式：font:font-style font-weight font-size/line-height font-family;

必须按顺序书写，并且字号和字体值（后两个）必须书写，否则 font 属性不生效。

文本

行高

p {line-height: 1.6;}

空白符

white-space 属性设置如何处理元素内的空白，默认空白会被浏览器忽略。

值为 nowrap：文本不会换行，会在同一行上继续，直到遇到
标签为止。

值为 pre：空白会被保留，其行为方式类似 HTML 中的

标签。

值为 pre-wrap：保留空白符，正常换行。

值为 pre-line：合并空白符，保留换行符。

复合选择器

后代选择器

选中某元素的所有后代（包含儿子、孙子、重孙子），选择器之间用空格隔开。

/* 选中 div 下的 a 元素 */
div a {color: #000;}

子代选择器

选中某元素的子代元素（最近的子级），选择器之间用 > 隔开。

div > a {color: #000;}

并集选择器

选中多组标签设置相同的样式，选择器之间用逗号, 隔开。

div,
a {color: #000;}

交集选择器

选中同时满足多个条件的元素，选择器之间连写，没有任何符号。

div.box {color: #000;}

兄弟选择器

/* 选中 div 后相邻的兄弟 p 元素 */
div + p {color: green;}
/* 选中 div 后的所有兄弟 p 元素 */
div ~ p {color: green;}

属性选择器

/* 选中具有 title 属性的元素 */
[title] {color: green;}
/* 选中 title 属性值为 hello 的元素 */
[title="hello"] {color: green;}
/* 选中 title 属性值以 a 开头的元素 */
[title^="a"] {color: green;}
/* 选中 title 属性值以 a 结尾的元素 */
[title$="a"] {color: green;}
/* 选中 title 属性值包含 a 的元素 */
[title*="a"] {color: green;}

伪类选择器

伪类很像类，但不是类，是元素特殊状态的一种描述。伪类表示元素状态，选中元素的某个状态设置样式。

状态伪类

超链接一共有 4 个状态，给超链接设置状态时，需要按 LVHA（LV 哈）顺序书写。

• :link 访问前
• :visited 访问后
• :hover 鼠标悬停
• :active 点击时（激活）

结构伪类

根据元素的结构关系查找元素。

• E:first-child 查找第一个 E 元素
• E:last-child 查找最后一个 E 元素
• E:nth-child(N) 查找第 N 个 E 元素（第一个元素 N 值为 1）
• :first-of-type 所有同类型兄弟元素中的第一个
• :last-of-type 所有同类型兄弟元素中的最后一个
• :nth-of-type(n) 所有同类型兄弟元素中的第 n 个

nth-child(公式)用法：

• 2n：偶数标签
• 2n+1：奇数标签（或 2n-1）
• 5n：找到 5 的倍数的标签
• n+5：找到第 5 个以后的标签（-n+ 5 为第 5 个以前的标签）

下面了解即可：

1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第 n 个
3. :only-child 选择没有兄弟的元素（独生子女）
4. :only-of-type 选择没有同类型兄弟的元素
5. :root 根元素
6. :empty 内容为空元素（空格也算内容）

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI 伪类

1. :checked 被选中的复选框或单选按钮
2. :enable 可用的表单元素（没有 disabled 属性）
3. :disabled 不可用的表单元素（有 disabled 属性）

目标伪类（了解）

:target 选中锚点指向的元素。

<style>
  div {
    background: gray;
    height: 300px;
  }
  div:target {background: green;}
</style>

<a href="#one"> 去看第 1 个 </a>
<a href="#two"> 去看第 2 个 </a>

<div id="one"> 第 1 个 </div>
<br />
<div id="two"> 第 2 个 </div>

语言伪类（了解）

:lang()根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置。创建虚拟元素（伪元素），用来摆放装饰性的内容。

• E::before 在 E 元素里面最前面添加一个伪元素
• E::after 在 E 元素里面最后面添加一个伪元素
• ::first-letter 选中元素中的第一个文字
• ::first-line 选中元素中的第一行文字
• ::selection 选中被鼠标选中的内容
• ::placeholder 选中输入框的提示文字

必须设置 content: "内容"; 属性，用来设置伪元素内容，如果没有内容，则内容留空即可。伪元素默认是行内显示模式，权重和标签选择器相同。

CSS 三大特性

继承性

子级默认继承父级的文字控制属性。

层叠性

相同的属性会覆盖，即后面的属性覆盖全面的属性。不同的属性会叠加，即不同的属性都生效。

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器 < 标签选择器 < 类选择器 <id 选择器 < 行内样式 <!important

叠加计算

如果是复合选择器，则需要权重叠加计算。

公式：(行内样式，id 选择器个数，类选择器个数，标签选择器个数)

规则：从左往右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。!important 权重最高，继承权重最低。

显示模式

块级（block）：独占一行；宽高属性生效；默认宽度是父级的 100%

行内（inline）：一行共存多个；宽高属性不生效；宽高由内容撑开

行内块（inline-block）：一行共存多个；宽高属性生效；宽高默认由内容撑开

盒子模型

盒子尺寸

盒子尺寸 = 内容尺寸 + 内边距尺寸 +border 尺寸。外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

给盒子加 border/padding 会撑大盒子，解决方法有二：

• 手动做减法，减掉 border/padding 的尺寸
• 启动内减模式：box-sizing: border-box;

外边距问题

合并现象

垂直排列的兄弟元素，上下 margin 会合并，取两个 margin 中的较大值生效。

塌陷问题

父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。

解决方法：

• 取消子级 margin，父级设置 padding（推荐）
• 父级设置 overflow: hidden;
• 父级设置 border-top

行内元素边距问题

行内元素添加 margin 和 padding，无法改变元素垂直位置。

解决方法：给行内元素添加行高（line-height）来改变垂直位置。

圆角

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%。

div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100px;
  /* border-radius: 50%; */
}

胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半。

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。
   即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。例如：text-align、line-height、text-indent 等。
2. 如何让子元素，在父亲中水平居中：
   若子元素为块元素，给父元素加上：margin: 0 auto;。
   若子元素为行内元素、行内块元素，给父元素加上：text-align:center。
3. 如何让子元素，在父亲中垂直居中：
   若子元素为块元素，给子元素加上：margin-top，值为：(父元素 content -子元素盒子总高) / 2。
   若子元素为行内元素、行内块元素：让父元素的 height = line-height，每个子元素都加上：verticalalign: middle;。
   补充：若想绝对垂直居中，父元素 font-size 设置为 0。

元素之间的空白问题

产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置 font-size: 0，再给需要显示文字的元素，单独设置字体大小（推
   荐）。

行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
方案一：给行内块设置 vertical，值不为 baseline 即可，设置为 middel、bottom、top 均可。
方案二：若父元素中只有一张图片，设置图片为 display: block。
方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置 fontsize。

浮动（了解）

布局相关技术有：

• 常规流（文档流）：行级、块级、表格布局、FlexBox、Grid 布局
• 浮动
• 绝对定位

清除浮动推荐使用双伪元素法：

/* before 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

/* after 清除浮动 */
.clearfix::after {clear: both;}

Flex 布局

给父元素设置display: flex;，子元素可以自动挤压或拉伸。

组成

Flex 组成部分：

• 弹性容器（创建容器：display: flex;）
• 弹性盒子
• 主轴（默认在水平方向，对齐方式：justify-content）
• 侧轴 / 交叉轴（默认在垂直方向，对齐方式：align-items 所有弹性盒子、align-self 某个弹性盒子）

其他属性

• 修改主轴方向：flex-direction 属性
• 弹性伸缩比：flex 属性（控制弹性盒子主轴方向的尺寸，表示占用父级剩余尺寸的份数，属性值：整数数字）
• 弹性盒子换行：flex-wrap 属性（属性值：wrap 换行，nowrap 不换行）
• 行对齐方式：align-content 属性（对单行弹性盒子不生效）

定位

灵活改变盒子在网页中的位置，属性：position。设置盒子的位置用边偏移属性：left、right、top、bottom。

相对定位

改变位置的参照物是自己原来的位置，不脱标（占位），标签显示模式不变。

div {
  position: relative;
  top: 100px;
  left: 100px;
}

绝对定位

• 脱标（不占位）
• 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视区改位置
• 显示模式会改变：宽高生效，具备了行内块的特点

工作中一般不单独使用相对或绝对定位，都是配合着使用：子级绝对定位，父级相对定位（子绝父相）。

定位居中

首先设置绝对定位，水平垂直边偏移为 50%，最后 transform: translate(-50%, -50%)。

div {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

固定定位

元素的位置在网页滚动时不会改变。

• 脱标（不占位）
• 参照物：浏览器窗口
• 显示模式特点：宽高生效，具备了行内块的特点

z-index

即堆叠层级，默认按照标签书写顺序，后来者居上。

z-index 默认是 0，取值越大显示顺序越靠上。

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	已经定位的祖先元素；浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

实用代码

清除默认样式

* {
  margin: 0;
  padding: 0;
}

版心

/* 版心 */
.wrapper {
  margin: 0 auto;
  width: 1200px;
}

CSS 精灵

即 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再精确定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

实现步骤：

• 创建盒子，盒子尺寸与小图尺寸相同
• 设置盒子背景图为精灵图
• 添加 background-position 属性，改变背景图位置

  div {
  width: 100px;
  height: 100px;
  background-color: pink;
  background-image: url(./123.jpg);
  background-position: -50px -50px;
  }

字体图标

展示的是图标，本质是字体。作用是在网页中添加简单的、颜色单一的小图标。

字体图标下载：https://www.iconfont.cn/

垂直对齐方式

属性名：vertical-align，默认是基线对齐（baseline），其他属性值：top（颈部对齐）、middle（居中对齐）、bottom（顶部对齐）。

浏览器把行内块、行内标签当做文字处理，默认按基线对齐。

过渡 transition

可以为一个元素在不同状态之间切换的时候添加过渡效果。

img {
  width: 100px;
  height: 100px;
  transition: all 1s;
}

img:hover {
  width: 200px;
  height: 200px;
}

移动

平面转换 transform

平面转换又叫 2D 转换，改变盒子在平面内的形态（平移 translate()、旋转 rotate()、缩放 scale()、倾斜 skew()），一般与过渡配合使用，为元素添加动态效果。

线性渐变

属性：background-image: linear-gradient();

background-image: linear-gradient(
  渐变方向（to 方位名词 或 角度度数）,
  颜色 1 终点位置,
  颜色 2 终点位置,
  ......
);

如果不指定方向，默认从上到下渐变：

• to right：从左侧开始的线性渐变
• to bottom right：从左上角到右下角的线性渐变
• 45deg：45°的线性渐变

/* 蓝色渐变到红色 */ 
linear-gradient(blue, red);
/* 蓝色占 80% 渐变到红色 */ 
linear-gradient(blue 80%, red);
/* 多个终止色 */
linear-gradient(blue, red, yellow, green, orange);
/* 透明色 */
linear-gradient(transparent, rgba(0, 0, 0, 0.5));

径向渐变

属性：background-image: radial-gradient();

background-image: radial-gradient(
  半径 at 圆心位置（半径可以是 2 条，则为椭圆）,
  颜色 1 终点位置,
  颜色 2 终点位置,
  ......
);

空间转换

视距 perspective

指定了观察者与 Z = 0 平面的距离，为元素添加透视效果（近大远小、近实远虚）。

perspective 属性要添加给直接父级，取值范围 800-1200（经验值）。

.father {perspective: 1000px;}

.son {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background-color: rebeccapurple;
  transition: all 0.5s;
}
.son:hover {transform: translateZ(-300px);
}

旋转

左手法则：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

• rotateX(60deg)
• rotateY(60deg)
• rotateZ(60deg)

立体呈现

作用是设置元素的子元素是位于 3D 空间还是平面中，属性名：transform-style，属性值：preserve-3d（子级处于 3D 空间），flat（子级处于平面中）。

动画

动画 animation 是加强版的过渡。实现步骤：

1. 定义动画
2. 使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态。

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  /* 使用动画 */
  animation: change 1s;
}
/* 定义动画：宽度从 100 变化到 800 */
@keyframes change {
  from {width: 100px;}
  to {width: 800px;}
}
/* 定义动画 另一种写法 */
@keyframes change2 {
  0% {
    width: 100px;
    height: 100px;
  }
  20% {
    width: 300px;
    height: 200px;
  }
  100% {
    width: 800px;
    height: 300px;
  }
}

屏幕分辨率

• 物理分辨率：即硬件分辨率，出厂设置好的
• 逻辑分辨率：缩放调节的分辨率，由软件 / 驱动设置（写代码参考逻辑分辨率）

长度单位

1. px：像素
2. em：相对于当前元素或其父元素 font-size 的倍数
3. rem：相对于根元素 font-size 的倍数，html 标签就是根，1rem = 1HTML 字号大小
4. %：相对父元素计算

目前 rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度的 1 /10。

vw 与 vh

是相对单位，相对视口的尺寸（viewport width，viewport height）计算结果。

1vw = 1/100 视口宽度，1vh = 1/100 视口高度。

媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的 HTML 标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。当某个条件成立，执行对应的 CSS 样式。

@media (width: 500px) {
  body {background-color: red;}
}

完整写法（了解）

@media 媒体类型 and (媒体特性) {CSS 代码}

媒体类型用来区分设备类型：

• 屏幕 – screen – 带屏幕的设备
• 打印预览 – print – 打印原来模式
• 阅读器 – speech – 屏幕阅读模式
• 不区分类型 – all – 默认值，包括以上 3 种情形

媒体特性用来描述媒体类型的具体特征：

• 视口宽高 – width、height
• 视口最大 / 最小宽高 – max-width、max-height、min-width、min-height
• 屏幕方向 – orientation（portrait 竖屏、landscape 横屏）

逻辑操作符：and、only、not。

CSS 资源：

• MDN：https://developer.mozilla.org/zh-CN/
• W3C CSS 规范：https://www.w3.org/Style/CSS/